<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${pageType === 'edit' ? '编辑' : pageType === 'add' ? '新增' : '详情'}-${dialogParams.processName}工序`"
		width="1000px"
		:show-content-loading="showLoading"
		:confirm-btn-loading="saveBtnLoading"
		:show-confirm-btn="pageType !== 'detail'"
		:show-cancel-btn="pageType !== 'detail'"
		:show-close-btn="pageType === 'detail'"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<jk-table
			ref="frontGroupSalaryMonthReportTable"
			border
			show-footer
			:stripe="false"
			:data="tableData"
			:span-method="spanMethod"
			:footer-method="footerMethod"
		>
			<vxe-column
				v-for="(item, index) in tableColumnList"
				:key="index"
				:title="item.title"
				:field="item.key"
			>
			</vxe-column>
		</jk-table>

	</jk-dialog>
</template>

<script>
    import { iotMachineDetail } from '@/api/energy/processEnergy';
    import XEUtils from 'xe-utils';
    export default {
        props: {
            pageType: {
                type: String,
                default: ''
            },

            dialogState: {
                type: Boolean,
                default: false
            },
            dialogParams: {
                type: Object,
                default: () => {}
            }
        },
        data(_this) {
            return {
                saveBtnLoading: false,
                showDialog: false,
                showLoading: true,
                tableData: [],
                tableColumnList: []
            };
        },
        methods: {
            spanMethod({ row, column, rowIndex, columnIndex }) {
                if (column.property === 'processName') {
                    // 你需要合并的列的键名
                    if (rowIndex > 0 && this.tableData[rowIndex][column.property] === this.tableData[rowIndex - 1][column.property]) {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                    let rowspan = 1;
                    for (let i = rowIndex + 1; i < this.tableData.length; i++) {
                        if (this.tableData[i][column.property] === row[column.property]) {
                            rowspan++;
                        } else {
                            break;
                        }
                    }
                    return {
                        rowspan,
                        colspan: 1
                    };
                }
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
            },
            getDetailRequest() {
                const { processId, belongDate } = this.$props.dialogParams;
                return iotMachineDetail({ processId, belongDate }).then(res => {
                    if (res.data.status === 200) {
                        this.tableColumnList = res.data.res.tableHeader ? res.data.res.tableHeader.map(x => {
                            return {
                                title: x.value,
                                key: x.key
                            };
                        }) : [];
                        this.tableData = res.data.res.tableData;
                    }
                });
            },
            footerMethod({ columns, data }) {
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return `合计`;
                        }
                        if (column.property !== 'belongDate') {
                            return XEUtils.sum(data, column.property);
                        }
                        return null;
                    })
                ];
            },

            async getDependentData() {
                this.showLoading = true;
                if (this.dialogParams.processId) await this.getDetailRequest();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
<style scoped>

/deep/.vxe-table--footer{
    font-weight: 600;
    font-size: 14px;
}

</style>
